import './App.css';
// react-router-dom  react的路由插件

import {
  BrowserRouter as Router,
  Route,
  Routes,
  Link,
  NavLink
} from 'react-router-dom'
import Home from '../../views/home/home';
import About from '../../views/about/about';
import News from '../../views/home/homeSon/news';
import Msg from '../../views/home/homeSon/msg';
import HooksTest from '../../views/hooksTest/hooksTest';
import { useState } from 'react';

function App() {
  const [title, setTitle] = useState('侯邦');
  let changehoubang = () => {
    setTitle('应该是');
  }
  return (
    <Router>
      <div>
        <h1>app</h1>
        <button onClick={changehoubang}>changeHoubang</button>
        <ul>
          <li>
            <Link to="/home">home</Link>
          </li>

          <li>
            <NavLink to="/about">about</NavLink>
          </li>
          <li>
            <Link to='/hookstest'>hookstest</Link>
          </li>
        </ul>
        <Routes>
          <Route path='/home' element={<Home></Home>}>
            <Route path='news/:id' element={<News></News>}></Route>
            <Route path='msg' element={<Msg></Msg>}></Route>
          </Route>
          <Route path='/about' element={<About title={title}></About>}></Route>
          {/* 默认路由 */}
          <Route path='/' element={<Home></Home>}></Route>
          <Route path='/hookstest' element={<HooksTest></HooksTest>}></Route>
        </Routes>
      </div>
    </Router>
  );
}



export default App;

/* 
react-router-dom@6嵌套路由的写法
①在pages或者views中写路由组件
②在app.js中注册路由组件，嵌套路由，写到父路由组价内部，path不要写/
③写导航 link  to 写全路径
④嵌套的路由组件显示到<Outlet></Outlet>位置

*/